"use client";

import { Card, CardBody, CardHeader } from "@nextui-org/react";
import { motion } from "framer-motion";
import {
  FiCpu,
  FiGlobe,
  FiShield,
  FiZap,
  FiCloud,
  FiDatabase,
} from "react-icons/fi";

export default function Features() {
  const features = [
    {
      icon: FiCpu,
      title: "高速稳定",
      description: "采用先进的5G技术，提供高速稳定的网络连接",
    },
    {
      icon: FiGlobe,
      title: "全球覆盖",
      description: "覆盖200+国家和地区，为全球设备提供无缝连接",
    },
    {
      icon: FiShield,
      title: "安全可靠",
      description: "多重加密技术，确保数据传输安全",
    },
    {
      icon: FiZap,
      title: "快速激活",
      description: "即插即用，快速激活，简单便捷",
    },
    {
      icon: FiCloud,
      title: "云端管理",
      description: "提供完整的云端管理平台，实时监控设备状态",
    },
    {
      icon: FiDatabase,
      title: "大流量支持",
      description: "支持大流量数据传输，满足各类应用场景",
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-white to-blue-50">
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="container mx-auto px-4 py-20">
          <motion.h1
            className="text-4xl md:text-5xl font-bold text-center mb-6"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            产品特点
          </motion.h1>
          <motion.p
            className="text-xl text-center max-w-2xl mx-auto"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            为您的物联网设备提供最优质的连接服务
          </motion.p>
        </div>
      </div>

      {/* Features Grid */}
      <div className="container mx-auto px-4 py-20">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
            >
              <Card className="bg-white/70 backdrop-blur-md hover:shadow-lg transition-shadow">
                <CardHeader className="flex gap-4 items-center">
                  <feature.icon size={24} className="text-primary" />
                  <h3 className="text-xl font-semibold">{feature.title}</h3>
                </CardHeader>
                <CardBody>
                  <p className="text-gray-600">{feature.description}</p>
                </CardBody>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}
